{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Trade Trends</title>

    <!-- Bootstrap -->
    <link href="{% static '' %}default/css/bootstrap.min.css" rel="stylesheet">
    <link href="{% static '' %}default/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
{% include 'default/block_nav.html' %}
<div class="container theme-showcase" role="main">

      <!-- Main jumbotron for a primary marketing message or call to action -->


    <style>
        .tab-content{padding-top: 60px;}
        #form_url input.url {width: 600px;}
        #form_word input.word {width: 300px;}
        #form_high .input-group{width: 200px;}
        #form_high input{width: 200px;}
        #form_product input.link {width: 600px;}
        .lodaing{ text-align: center;position: absolute;width:100%;display: block;margin:50px auto;top:50px;z-index: 9999;}
    </style>
<div class="container">
    <ul id="myTab" class="nav nav-tabs">
   <li class="active">
      <a href="#form_word" data-toggle="tab">
         关键词模式
      </a>
   </li>
   <li><a href="#form_url" data-toggle="tab">URL模式</a></li>
   <li><a href="#form_high" data-toggle="tab">高级模式</a></li>
   <li><a href="#form_product" data-toggle="tab">单产品采集</a></li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="form_word">
      <div class="container text-center">
          <form class="form-inline" action="{% url 'aliexpress:search' %}" method="POST">
              {% csrf_token %}
              <input type="hidden" value="1"/>
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">搜索关键词 (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">W</div>
      <input type="text" class="form-control word" id="keyword" name="keyword" placeholder="Keywords">
      <div class="input-group-addon">输入搜索词</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">添 加</button>
</form>
          <form action="{% url 'aliexpress:search' %}" method="POST">
              {% csrf_token %}
              <div class="center-block" style="margin-top: 15px;">
                  <textarea name="lotkeywords" id="lotkeywords" cols="66" rows="10"></textarea>

    </div><button type="submit" class="btn btn-primary">批量导入</button>
          </form>

      </div>
   </div>
   <div class="tab-pane fade" id="form_url">
      <div class="container text-center">
          <form class="form-inline" action="{% url 'aliexpress:search' %}" method="POST">
              {% csrf_token %}
              <input type="hidden" value="1"/>
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">搜索结果URL (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">U</div>
      <input type="text" class="form-control url" id="url" name="url" placeholder="URL">
      <div class="input-group-addon">输入URL</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">添 加</button>
</form>

      </div>
   </div>
   <div class="tab-pane fade" id="form_high">
      <div class="container text-center">
          <h2>Comming soon ...</h2>
          <p>
               可以筛选价格区间、排序、免邮、ship from、采集页数
          </p>

      </div>
   </div>
   <div class="tab-pane fade" id="form_product">
      <div class="container text-center">
          <form id="formLink" class="form-inline" action="{% url 'aliexpress:single' %}" method="POST">
              {% csrf_token %}
              <input type="hidden" value="4"/>
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">产品URL (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">U</div>
      <input type="text" class="form-control link" id="link" name="link" placeholder="PRODUCT URL">
      <div class="input-group-addon">输入URL</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">采 集</button>
</form>

      </div>
   </div>

</div>

</div>


      <div class="page-header">
        <h1 id="Statistics">公共采集任务管理</h1>
      </div>
      <div class="row">
        <div class="col-md-12">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>收藏</th>
                <th>关键词</th>
                <th>结果数量</th>
                <th>产品数量</th>
                <th>更新时间</th>
                <th>采集</th>
              </tr>
            </thead>
            <tbody>
            {% for word in wordList %}
              <tr>
                <td>{{ word.id }}</td>
                <td>{% if request.user in word.user.all  %}<i class="glyphicon glyphicon-star"></i>{% else %}<i class="glyphicon glyphicon-star-empty active" onclick="addfav({{ word.id }})"></i>{% endif %}</td>
                <td><a href="{% url 'products' %}?word={{ word.id }}">{{ word.keyword }}</a></td>
                <td class="res-{{ word.id }}">{{ word.results }}</td>
                <td class="num-{{ word.id }}">{{ word.product_num }}</td>
                <td class="time-{{ word.id }}">{{ word.update_time|date:'Y/m/d H:i:s' }}</td>
                <td class="sta-{{ word.id }}">{% if word.status %}<i class="glyphicon glyphicon-ok-sign"></i>{% else %}<i class="glyphicon glyphicon-play-circle active" onclick="caiji('{{ word.id }}')"></i>{% endif %}</td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{% static '' %}default/js/bootstrap.min.js"></script>
  <script>
      function caiji(wordId){
          alert("开始采集。。。");
          $.post("{% url 'aliexpress:search_product_list' %}",{wordId:wordId},function(result){
              //$("span").html(result);
              if(result.error==1){
                  alert(result.msg);
                  return false;
              }else{
                  $(".res-"+wordId).html(result.results);
                  $(".num-"+wordId).html(result.product_num);
                  $(".time-"+wordId).html(result.update_time);
                  $(".sta-"+wordId).html('<i class="glyphicon glyphicon-ok-sign"></i>');
              }
          });
      }

      function addfav(id){
          //location.href = "{% url 'aliexpress:monitor_add' %}?id="+id
          location.href = "{% url 'favorite_add' %}?wordId="+id
      }

      $("form#formLink").submit(function(e){
          alert("开始采集产品信息。。");
          $("#loading").css("display","block");
          $("#loading").addClass("lodaing");
      });
  </script>
  {% include 'default/tongji.html' %}
  
  <div id="loading" class="" style="display: none;">
      <img src="{% static 'images/loading.jpg' %}" alt=""/>
  </div>
  </body>
</html>